<template>
  <div class="company">
    <lyhHeader></lyhHeader>
    <div class="container">
        <div class="hd">
            <div class="title">{{data.companyName}}</div>
            <div class="tab-navbar">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="tab-container1">公司介绍</mt-tab-item>
                    <mt-tab-item id="tab-container2">产品展厅</mt-tab-item>
                    <mt-tab-item id="tab-container3">展位实景</mt-tab-item>
                    <mt-tab-item id="tab-container4">热点新闻</mt-tab-item>
                </mt-navbar>
            </div>
        </div>
        <div class="tab-container">
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="tab-container1">
                    <img :src="data.companyLogo" alt="" style="max-width:100%">
                    <div class="company-yj">
                        <div class="head">公司业绩</div>
                        <div class="body">1999年营业收入18000百万美元，增长率为7.8%；实现利润38.36亿美元，增长率为26.6%。</div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <div class="product">
                        我是产品

                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3" class="boothInfo"> 
                    <div class="swiper">
                        <mt-swipe :auto="2000" >
                            <mt-swipe-item v-for="(item,index) in data.boothInfo.bannerItems " :key="index">
                                <img :src="item.picUrl" alt="">
                            </mt-swipe-item>
                        </mt-swipe>
                    </div>
                    <div class="boothPic">
                        <img :src="data.boothInfo.boothPic"   alt="" style="max-width:100%">
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>        
    </div>

  </div>
</template>

<script>
import lyhHeader from '@/components/Header.vue'

export default {
  name: 'product',
  computed: {
    data() {
        return this.$route.params;
    }

  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      active: 'tab-container2',
      selected: 'tab-container2'
    }
  },
  components: {lyhHeader},
  methods: {
    goCompany () {

    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .container {
        background-color: #ebebeb;
        .hd {
            // height: 78px;
            background-color: #444556;
            color: #fff;
            text-align: center;
            .title {
                font-size: 18px;
                padding-top: 20px;
                padding-bottom: 12px;
            }
        }
        .mint-navbar{
            background-color: #444556;
            padding: 0 10px;

            .mint-tab-item {
                padding: 9px;
                border-radius: 2px 2px 0 0;
               
                &.is-selected {
                    border-bottom: 0;
                    color: #cd0070;
                    background-color: #fff;
                    margin-bottom: 0;
                    font-weight: bold;
                }


            }



        }

        .tab-container {

            .boothInfo {
                .boothPic {
                    padding: 0 10px;

                }
            }

            .swiper {
                padding: 10px;
                height: 180px;
                background-color: #e1e1e1;
                overflow: hidden;

                .mint-swipe-item > img {
                    width: 100%;
                    height: 100%;
                }
            }


            .product {
                .product-item {
                    display: flex;
                    padding: 12px 15px;
                    height: 75px;
                    margin-top: 5px;
                    background-color: #fff;
                    box-sizing: border-box;
                    .logo {
                        width: 50px;
                        height: 50px;
                        background-color: #ccc;
                        margin-right: 15px;

                    }

                    .title {
                        flex: 1;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }



</style>
